<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" http-equiv="X-Frame-Options" content="deny"/>
		<title></title>
		<script src="../require/require.js"></script>
		<script src="../require/require-config.js"></script>
		<script>
		/*<![CDATA[*/
			require(['jquery', 'jqxbuttons', 'jqxsplitter', 'jqxtabs', 'jqxtree', 'jqxexpander', 'jqxmenu'], function() {

				//初始化Splitter
				var initSplitter = function() {
					$('#splitContainer').jqxSplitter({
						theme: 'darkblue',
						height: '100%',
						width: '100%',
						orientation: 'horizontal',
						panels: [{
							size: '10%'
						}, {
							size: '80%'
						}]
					});
					$('#splitter').jqxSplitter({
						theme: 'darkblue',
						width: '100%',
						panels: [{
							size: 200
						}, {
							size: 200
						}]
					});
				}

				//初始化选项卡
				var initTabs = function() {
					$("#tabswidget").jqxTabs({
						theme: 'darkblue',
						height: '100%',
						width: '100%',
						showCloseButtons: true
					});
				}

				//初始化导航树
				var initNavTree = function() {
					// Create jqxExpander
					$('#jqxExpander').jqxExpander({
						theme: 'darkblue',
						showArrow: false,
						toggleMode: 'none',
						width: '100%',
						height: '100%',
					});
					// Create jqxTree
					var source = [{
							label: "系统管理",
							expanded: true,
							items: [{
									label: '用户',
									value: '/user/all'
								},
								{
									label: "角色",
								},
								{
									label: "权限",
								}
							]
						},
						{
							label: "娱乐",
							expanded: true,
							items: [{
									label: "游戏"
								},
								{
									label: "音乐"
								},
								{
									label: "电影"
								},
								{
									label: "电视剧"
								},
							]
						}
					];
					$('#jqxTree').jqxTree({
						theme: 'darkblue',
						source: source,
						width: '100%',
						height: '100%'
					}).on('itemClick', function(event) {																													
						var args = event.args;
						var item = $('#jqxTree').jqxTree('getItem', args.element);
						var label = item.label;
						var value = item.value;						
						var iframe = '<iframe width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" '+
						'frameborder="0" scrolling="no" src="'+value+'"> </iframe>'
												
						var tabsLength = $('#tabswidget').jqxTabs('length');
						var isExist = false;
						for(var i = 0; i < tabsLength; i++){							
							if(label == $('#tabswidget').jqxTabs('getTitleAt', i)){
								isExist = true;
								break;
							}
						}
						if(!isExist){
							$('#tabswidget').jqxTabs('addLast', label, iframe );
						}	
					});

				}

				//初始化头部按钮
				var initHeadBtn = function() {

					$("#jqxMenu").jqxMenu({
						theme: 'darkblue',						
						width: 100,
						height: '30px'
					});
				}

				$(document).ready(function() {

					initHeadBtn();
					initSplitter();
					initTabs();
					initNavTree();

					$(document.body).css('visibility', 'visible');
				})
			});
			/*]]>*/
		</script>
	</head>

	<body style="visibility:hidden;width: 100%;height: 1000px">
		<div id="splitContainer">
			<div style="background-image: url(../img/bg_blue.png);">
				<div id="jqxMenu" style="float: right; margin-right: 50px; margin-top: 30px; ">
					<ul>						
						<li><font size="3">换&nbsp;&nbsp;肤</font><br /> 
							<ul style='width: 100px;'>
								<li>
									高雅黑
								</li>
								<li>
									深海蓝
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<div>
				<div id="splitter">
					<div>
						<div id='jqxExpander'>
							<div>
								导航栏
							</div>
							<div style="overflow: hidden;">
								<div style="border: none;" id='jqxTree'>
								</div>
							</div>
						</div>

					</div>
					<div>
						<div class="jqx-hideborder jqx-hidescrollbars" id="tabswidget">
							<ul>
								<li style="margin-left: 10px;">首页</li>
							</ul>
							<div>
								内容1
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>